<template>
	<view>
		<image class="mine-bg absolute" src="https://ryyf.wangjintech.cn/static/image/mine/0.png" />
		<view class="mine-header relative zi2 flex align-item_center justify-content_space-between">
			<view class="user flex align-item_center">
				<button v-if="!token" open-type="getPhoneNumber" class="absolute"
					style="top: 0;left: 0;;width: 100%;height: 100%;opacity: 0;" @getphonenumber="getphonenumber">登录</button>
				<up-avatar :src="userInfo?.avatar" size="128rpx" @click="uploadImg"></up-avatar>
				<view class="data" @click="changeUserInfo">
					<view class="name">{{userInfo?.nickname || userInfo?.id || '点击登录'}}</view>
					<view class="mobile">{{userInfo?.mobile}}</view>
				</view>
			</view>
			<view class="relative operations zi2 " style="z-index: 999;" v-if="token">
				<image class="operations block" src="https://ryyf.wangjintech.cn/static/image/mine/1.png"
					@click="operationShow = !operationShow" />
				<view class="absolute list" v-if="operationShow">
					<view v-for="item in operations" :key="item.id" @click="operationJump(item)">{{item.name}}</view>
				</view>
			</view>
		</view>
		<view class="setting relative  flex align-item_center justify-content_space-between">
			<view class="item" @click="list(1)">
				<view class="count">{{userCount.goodCount}}</view>
				<view class="name">获赞</view>
			</view>
			<view class="item" @click="list(2)">
				<view class="count">{{userCount.commentCount}}</view>
				<view class="name">评论</view>
			</view>
			<view class="item" @click="followFans(1)">
				<view class="count">{{userCount.followCount}}</view>
				<view class="name">关注</view>
			</view>
			<view class="item" @click="list(3)">
				<view class="count">{{userCount.collectCount}}</view>
				<view class="name">收藏</view>
			</view>
			<view class="item" @click="followFans(2)">
				<view class="count">{{userCount.fansCount}}</view>
				<view class="name">粉丝</view>
			</view>
		</view>

		<view class="mine-main relative border-box">
			<view class="tabs">
				<up-tabs :current="current" :list="tabsList" :activeStyle="activeStyle" :inactiveStyle="inactiveStyle"
					lineWidth="12" lineColor="#4E96E9" @click="changeCurrent"></up-tabs>
			</view>
			<up-empty v-if="result.list.length ===0 " mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
			</up-empty>
			<template v-if="current === 0">
				<view class="item" v-for="(item,index) in result.list" :key="item.id">
					<postIndex power :item="item" @changeCollectStatus="changeCollectStatus" @changeGoodStatus="changeGoodStatus"
						@del="del" />
					<up-gap height="30rpx"></up-gap>
					<up-gap v-if="(index+1) !== result.list.length" height="1px" bgColor="#4B485D"></up-gap>
				</view>
			</template>
			<template v-else>
				<view v-for="(item,index) in result.list" :key="item.id">
					<deaftIndex power :item="item" @changeGoodStatus="changeGoodStatus" @del="del" />
					<up-gap v-if="(index+1) !== result.list.length" height="1px" bgColor="#4B485D"></up-gap>
				</view>
			</template>
		</view>

		<up-popup :show="nickname.show" @close="nicknameClose" round="24rpx" mode="center" :safeAreaInsetBottom="false">
			<view class="nicknameBox relative">
				<image class="close absolute" @click="nicknameClose"
					src="https://ryyf.wangjintech.cn/static/image/mine/2.png" />
				<view class="name">修改昵称</view>
				<view class="input flex align-item_center justify-content_center">
					<up-input placeholder="请输入昵称" border="none" v-model="nickname.value"></up-input>
				</view>
				<view class="save" @click="nicknameConfirm">保存</view>
			</view>
		</up-popup>

		<up-gap height="140rpx"></up-gap>
		<up-back-top :scrollTop="scrollTop" :iconStyle="iconStyle" :duration="200" :bottom="110"></up-back-top>
		<tabbar :current="3" />
	</view>
</template>

<script setup>
	import postIndex from "@/components/post/index.vue"
	import deaftIndex from "@/components/draft/index.vue"
	import tabbar from '@/components/tabbar.vue';
	import userApi from "@/api/member/user.js"
	import openApi from "@/api/biz/open.js"
	import authApi from "@/api/member/auth.js"
	import upload from "@/utils/upload.js"
	import {
		reactive,
		ref
	} from 'vue';
	import {
		onShow,
		onLoad,
		onPageScroll,
		onReachBottom
	} from "@dcloudio/uni-app"
	import {
		msg
	} from "@/utils/tool.js"

	onReachBottom(() => {
		if (result.list.length >= result.total) return;
		params.pageNo++;
		getStrategyPage()
	})

	onShow(() => {
		token.value = uni.getStorageSync("accessToken")

		if (token.value) {
			userGet()
			getUserCount()
		}

	})

	const del = (props) => {
		uni.showModal({
			title: '提示',
			content: "是否删除当前选中内容？",
			success(val) {
				if (val.confirm) {
					openApi.deleteStrategy(props.id).then(res => {
						if (res.code === 0) {
							msg("删除成功")
							params.pageNo = 1;
							getStrategyPage()
							getUserCount()
						}
					})
				}
			}
		})
	}

	const token = ref(null)

	function getphonenumber(val) {
		uni.showLoading({
			title: "正在登录",
			mask: true
		})
		if (val.detail.errMsg === 'getPhoneNumber:ok') {
			uni.login({
				provider: 'weixin',
				success: function(loginRes) {
					if (loginRes.errMsg === 'login:ok') {
						const data = {
							phoneCode: val.detail.code,
							loginCode: loginRes.code
						}
						authApi.weixinMiniAppLogin(data).then(res => {
							uni.hideLoading()
							if (res.code === 0) {
								uni.setStorageSync('accessToken', res.data.accessToken)
								token.value = res.data.accessToken
								msg("登录成功")
								userGet()
								getUserCount()
							} else {
								msg('登录失败')
							}
						})
					}
				},
				fail() {
					uni.hideLoading()
					msg('授权失败')
				}
			});
		} else {
			uni.hideLoading()
			msg('授权失败')
		}
	}

	function nicknameConfirm() {
		if (!nickname.value.trim()) return msg('昵称不能为空')
		userApi.update({
			nickname: nickname.value
		}).then((res) => {
			if (res.code === 0) {
				userGet()
				nicknameClose()
			}
		})
	}

	function nicknameClose() {
		nickname.show = false;
		nickname.value = ""
	}

	const nickname = reactive({
		show: false,
		value: ""
	})

	function changeUserInfo() {
		nickname.show = true;
		nickname.value = userInfo.value.nickname
	}

	function changeCurrent(val) {
		if (current.value === val.index) return;
		current.value = val.index
		params.pageNo = 1;
		getStrategyPage()
	}

	const current = ref(0)

	function changeGoodStatus(id) {
		let index = result.list.findIndex(item => item.id === id);
		if (result.list[index].goodStatus) result.list[index].goodCount--;
		else result.list[index].goodCount++;
		result.list[index].goodStatus = !result.list[index].goodStatus
	}

	function changeCollectStatus(id) {
		let index = result.list.findIndex(item => item.id === id);
		if (result.list[index].collectStatus) result.list[index].collectCount--;
		else result.list[index].collectCount++;
		result.list[index].collectStatus = !result.list[index].collectStatus
	}


	function uploadImg() {
		uni.chooseImage({
			count: 1,
			success: (chooseImageRes) => {
				const tempFilePaths = chooseImageRes.tempFilePaths;
				upload(chooseImageRes.tempFilePaths[0]).then((res) => {
					userApi.update({
						avatar: res.data,
					}).then(res => {
						if (res.code === 0) {
							userGet()
						}
					})
				})
			}
		});
	}

	function operationJump(item) {
		let url;
		if (item.id === 1) {
			url = `/strategy/history/index`
		} else if (item.id === 2) {
			url = `/contribute/history/index`
		} else if (item.id === 3 || item.id === 4) {
			url = `/contribute/agreement/index?type=${item.id}`
		} else if (item.id === 5) {
			url = `/pages/feedback/index`
		} else if (item.id === 6) {
			url = `/pointProduct/account/index`
		} else if (item.id === 7) {
			url = `/pointProduct/pointsRecord/index`
		} else if (item.id === 8) {
			url = `/pointProduct/orders/index`
		} else if (item.id === 9) {
			url = `/pointProduct/drawRecord/index`
		}

		if (url) {
			operationShow.value = false
			uni.navigateTo({
				url
			})
		}
	}
	const operationShow = ref(false);
	const operations = [{
			name: "历史攻略",
			id: 1
		}, {
			name: "历史投稿",
			id: 2
		}, {
			name: "用户协议",
			id: 3
		}, {
			name: "隐私协议",
			id: 4
		}, {
			name: "问题反馈",
			id: 5
		},
		{
			name: "账号管理",
			id: 6
		}, {
			name: "积分记录",
			id: 7
		}, {
			name: "订单管理",
			id: 8
		}, {
			name: "抽奖记录",
			id: 9
		},
	]

	function followFans(type) {
		if (!uni.getStorageSync('accessToken')) return msg("请先登录后操作")
		uni.navigateTo({
			url: "/contribute/followFans/index?type=" + type
		})
	}

	function list(type) {
		if (!uni.getStorageSync('accessToken')) return msg("请先登录后操作")
		uni.navigateTo({
			url: "/contribute/list/index?type=" + type
		})
	}

	const iconStyle = reactive({
		fontSize: '32rpx',
		color: '#2979ff'
	});
	const scrollTop = ref(0);
	onPageScroll((e) => {
		scrollTop.value = e.scrollTop;
		if (operationShow.value) operationShow.value = !operationShow.value
	})

	const inactiveStyle = {
		color: '#EDFAFF',
		fontSize: "30rpx",
		fontWeight: "500",
	}
	const activeStyle = {
		color: '#EDFAFF',
		fontSize: "34rpx",
		fontWeight: '600',
	}

	// 创建响应式数据   
	const tabsList = reactive([{
			name: '攻略'
		},
		{
			name: '帖子'
		},
	]);

	const userInfo = ref();

	const params = reactive({
		pageNo: 1,
	})

	const result = reactive({
		list: [],
		total: 0
	})

	function getStrategyPage() {
		if (!userInfo.value?.id) return;
		openApi.getStrategyPage({
			pageNo: params.pageNo,
			pageSize: 10,
			userId: userInfo.value.id,
			type: current.value === 0 ? 2 : 1
		}).then(res => {
			if (res.code === 0) {
				result.total = res.data.total;
				if (params.pageNo === 1) result.list = res.data.list;
				else result.list = result.list.concat(res.data.list)
			}
		})
	}

	function userGet() {
		userApi.get().then(res => {
			userInfo.value = res.data;
			uni.setStorageSync("userInfo", res.data)
			getStrategyPage()
		})
	}


	const userCount = reactive({
		goodCount: 0,
		commentCount: 0,
		collectCount: 0,
		followCount: 0,
		fansCount: 0
	})

	function getUserCount() {
		openApi.getUserCount().then(res => {
			userCount.goodCount = res.data.goodCount
			userCount.commentCount = res.data.commentCount
			userCount.collectCount = res.data.collectCount
			userCount.followCount = res.data.followCount
			userCount.fansCount = res.data.fansCount
		})
	}

	onLoad(() => {})
</script>

<style>
	page {
		background-color: #1B1829;
	}
</style>
<style scoped lang="scss">
	// .delPost {
	// 	position: absolute;
	// 	right: 0;
	// 	top: 0;
	// 	color: #c12c1f;
	// 	border: 1rpx solid #fff;
	// 	border-radius: 50%;
	// 	width: 30rpx;
	// 	height: 30rpx;
	// 	line-height: 28rpx;
	// 	text-align: center;
	// 	font-size: 20rpx;
	// }

	.nicknameBox {
		width: 600rpx;
		height: 480rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		text-align: center;

		.close {
			top: 40rpx;
			right: 40rpx;
			width: 40rpx;
			height: 40rpx;
		}

		.save {
			width: 400rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			background: linear-gradient(105deg, #0D7BFA 0%, #7E76E3 100%);
			border-radius: 100rpx;
			font-weight: 600;
			font-size: 32rpx;
			color: #FFFFFF;
			margin: 94rpx auto 0;
		}

		.input {
			box-sizing: border-box;
			margin: 63rpx auto 0;
			width: 520rpx;
			height: 88rpx;
			background: #F5F5F5;
			border-radius: 16rpx;
			padding: 0rpx 30rpx;
		}

		.name {
			font-weight: 500;
			font-size: 36rpx;
			color: #151515;
			padding-top: 51rpx;
		}
	}

	.operations {
		width: 39.43rpx;
		height: 34.37rpx;

		.list {
			right: 0;
			top: 40rpx;
			z-index: 999;
			width: 220rpx;
			// height: 400rpx;
			background: #FFFFFF;
			border-radius: 16rpx;

			view:not(:first-child) {
				border-top: 1rpx solid #E5E5E5;
			}

			view {
				text-align: center;
				height: 98rpx;
				line-height: 98rpx;
			}
		}

		image {
			width: inherit;
			height: inherit;
		}
	}

	.mine-main {
		margin: 47rpx auto;
		width: 690rpx;
		background: #25223B;
		border-radius: 24rpx;
		padding: 20rpx 0 40rpx;

		.item {
			padding: 0rpx 20rpx;
			margin-top: 40rpx;
		}

		.tabs {
			position: relative;
			left: -20rpx;

			:deep(.u-tabs__wrapper__nav__item) {
				padding: 0 40rpx !important;
			}
		}


	}

	.setting {
		padding: 70rpx 40rpx 0;
		text-align: center;

		.item {
			.name {
				font-weight: 400;
				font-size: 26rpx;
				color: #EDFAFF;
				margin-top: 13rpx;
				opacity: 0.9;
			}

			.count {
				font-weight: 400;
				font-size: 36rpx;
				color: #EDFAFF;
			}
		}
	}

	.mine-bg {
		top: 0;
		left: 0;
		width: 750rpx;
		height: 868rpx;
	}

	.mine-header {
		padding: 176rpx 30rpx 0;

		.user {
			.data {
				margin-left: 30rpx;

				.mobile {
					font-weight: 400;
					font-size: 25rpx;
					color: #EDFAFF;
					margin-top: 4rpx;
					opacity: .8;
				}

				.name {
					font-weight: 600;
					font-size: 42rpx;
					color: #EDFAFF;
				}
			}
		}
	}
</style>